<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

</head>

<body>
    <h1 class="text-4xl font-bold text-center underline">
        Graph
    </h1>

        <div id="main" style="width:100%;height:100%; margin: auto;">

        </div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var categories = ['类别0', '类别1', '类别2'];
        var nodes_ = [];
        var tmp = [{'name': 'A', 'des': 'A', 'symbolSize': 100, 'category': 0}, {'name': 'B', 'des': 'B', 'symbolSize': 80, 'category': 1}, {'name': 'C', 'des': 'C', 'symbolSize': 60, 'category': 2}, {'name': 'D', 'des': 'D', 'symbolSize': 60, 'category': 2}];
        for(let i=0;i<tmp.length;i++){
            nodes_[i] = ({
                name: tmp[i]["name"],
                des: tmp[i]["des"],
                symbolSize: tmp[i]["symbolSize"],
                category: tmp[i]["category"]
            });
        }
        var rels_ = [];
        var tmp = [{'source': 'A', 'target': 'B', 'des': 'A->B'}, {'source': 'B', 'target': 'C', 'des': 'B->C'}, {'source': 'C', 'target': 'D', 'des': 'C->D'}];
                for(let i=0;i<tmp.length;i++) {
            rels_[i] = ({
                source: tmp[i]["source"],
                target: tmp[i]["target"],
                des: tmp[i]["des"]
            });
        }
        //             name: 'node04',
        //             des: 'nodedes04',
        //             symbolSize: 50,
        //             category: 1,
        //             source: 'node01',    
        //             target: 'node02',
        //             name: 'link01',

        option = {
            // 图的标题
            title: {
                text: 'Graph 关系图'
            },
            // 提示框的配置
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },
            // 工具箱
            toolbox: {
                // 显示工具箱
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    // 还原
                    restore: {
                        show: true
                    },
                    // 保存为图片
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: [{
                // selectedMode: 'single',
                data: categories.map(function (a) {
                    return a;
                })
            }],
            series: [{
                type: 'graph', // 类型:关系图
                layout: 'force', //图的布局，类型为力导图
                symbolSize: 40, // 调整节点的大小
                animationDuration: 500, // 初始渲染动画时长缩短为 500 毫秒
                animationDurationUpdate: 500, // 数据更新动画时长也设为 500 毫秒
                focusNodeAdjacency: true,
                draggable: true,
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 600,
                    edgeLength: [50, 300]
                },
                draggable: true,
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#4b565b',
                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                        if ( x.data.des.length > 8) {
                           return  x.data.des.substring(0, 8) + '...' 
                        }
                            return  x.data.des;
                            
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {},
                        formatter: function (x) {
                            return x.data.des;
                        }
                    }
                },

                // 数据
                data: nodes_,
                links: rels_,
                categories: categories,
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>